<template>
  <div>
    <Nav></Nav>
    <el-container style="height: 522px;">
      <el-scrollbar style="height:100%">
        <el-aside width="200px" style="background-color:rgb(58, 61, 73) ">
          <el-menu :default-openeds="['1']" text-color="rgba(0,0,0,.7)" :unique-opened="true">
            <el-submenu index="1">
              <template slot="title">
                <i class="el-icon-menu"></i>主页
              </template>
              <el-menu-item-group>
                <el-menu-item index="1-1" @click="isProList">商品管理</el-menu-item>
                <el-menu-item index="1-2" @click="isUserList">用户管理</el-menu-item>
                <el-menu-item index="1-3" @click="isOrderList">订单管理</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="2">
              <template slot="title">
                <i class="el-icon-reading"></i>信息
              </template>
              <el-menu-item-group>
                <el-menu-item index="2-1">商品统计</el-menu-item>
                <el-menu-item index="2-2">用户统计</el-menu-item>
                <el-menu-item index="2-3">订单统计</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <el-submenu index="3">
              <template slot="title">
                <i class="el-icon-setting"></i>设置
              </template>
              <el-menu-item-group>
                <el-menu-item index="3-1">更改信息</el-menu-item>
                <el-menu-item index="3-2" @click="back()">退出登录</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
      </el-scrollbar>
      <el-container>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Nav from "./Nav";
import axios from "axios";
import * as api from "@/api/getProlist";

export default {
  data() {
    const item = {
      date: "2016-05-02",
      name: "王小虎",
      address: "上海市普陀区金沙江路 1518 弄"
    };
    return {
      arr: [],
      tableData: Array(20).fill(item)
    };
  },
  methods: {
    isProList() {
      this.$router.push("/proList");
    },
    isUserList() {
      this.$router.push("/userList");
    },
    isOrderList() {
      this.$router.push("/order");
    },
    back(){
      this.$router.push("/Login")
    }
  },
  components: {
    Nav
  }
};
</script>
<style>
.el-header {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
  background: #fff;
}
</style>